<template>
    <div>
        <slot />
        <el-tabs v-model="query.tab" class="inline">
            <el-tab-pane v-for=" (val,key) in tabHead" :key="key" :label="key" :name="val" />
        </el-tabs>
        <div class="inline">
            <span>X轴</span>
            <el-select v-model="query.x" placeholder="全部" />
        </div>
        <div class="inline">
            <span>Y轴</span>
            <el-select v-model="query.y" placeholder="全部" />
        </div>
        <component :is="line?'veLine':'veHistogram'" :data="chartData" :extend="extend" />
    </div>
</template>

<script>
import veHistogram from 'v-charts/lib/histogram.common.js'
import veLine from 'v-charts/lib/line.common.js'
export default {
    components: {
        veHistogram,
        veLine
    },
    props: {
        value: Array,
        line: {
            type: Boolean,
            default: false
        }
    },
    data () {
        this.chartSettings = {
            dimension: '日期',
            metrics: ['访问用户']
        }
        this.extend = {
            series: {
                // 默认显示数据
                label: { show: true, position: 'top' }
            }
        }
        return {
            tabHead: {
                创业者: '1',
                投资人: '2',
                服务商: '3',
                上班族: '4',
                在校生: '5'
            },
            query: {
                tab: '1',
                x: '',
                y: ''
            },
            chartData: {
                columns: ['日期', '访问用户', '下单用户', '下单率'],
                rows: [
                    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
                    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
                    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
                    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
                    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
                    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
                ]
            }
        }
    },
    watch: {
        chartData: {
            deep: true,
            immediate: true,
            handler (val) {
                this.$emit('input', val.rows || [])
            }
        }

    },
    updated () {
        this.$emit('input', this.chartData.rows || [])
        // console.log('更新')
    },
    created () {
        console.log('line-create', this.line)
    },
    mounted () {
        console.log('line', this.line)
    },
    methods: {

    }
}
</script>
